<template>
  <div class="department-container">
    <div class="app-container">
      <el-card>
        <!-- 具体页面结构 -->
        考勤管理
        <!-- <son :value="num" @input="e=>num = e" /> -->
        <!-- v-model 是实现数据的双向绑定 ， 本质上就是一个语法糖 ， 它做了两件事：
          1、绑定一个 value 属性 给子组件
          2、绑定一个 input 事件子组件触发后重新赋值
           -->
        <!-- v-model 也有一些限制，
        1、属性必须叫value
        2、事件必须叫 input
        3、组件只能用一个 v-model 指令
        所以 诞生了一个新的修饰符 ： .sync  -->
        <son :value="num" />

        <!-- .sync 帮我们省去了事件绑定， 事件名必须是 update：属性名 -->
        <!-- .sync 完美解决了 v-model 的三点限制 -->
        <syncSon :count.sync="num" />
      </el-card></div>
  </div>
</template>
<script>
import son from './son.vue'
import syncSon from './syncSon.vue'
export default {
  components: {
    son,
    syncSon
  },
  data() {
    return {
      num: 0
    }
  }
}
</script>
